<template>
    <div class="MyHorizontalTreeList"
        :style="`--el-table-border:${isDark ? '1px solid rgba(246, 247, 251, 0.1);' : '1px solid #ebeef5'}`">
        <div style="width: 100%;display: grid;grid-template-columns: 0.25fr 0.1875fr 0.5625fr;">
            <el-text style="margin: 0px 0 10px 10px;">模块</el-text>
            <el-text style="margin: 0px 0 10px 10px;">页面名称</el-text>
            <el-text style="margin: 0px 0 10px 10px;">操作</el-text>
        </div>
        <div class="table" :key="tableKey">
            <tree :tree-list="showList" class="border-top border-left" @changes="change"></tree>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { useDark } from "@pureadmin/utils";
const { isDark } = useDark();
import tree from './tree.vue'
const props = defineProps({
    list: {
        type: Array<any>,
        default: []
    },
    checked: {
        type: Array<string>,
        default: []
    }
})
const emits = defineEmits(['update:list', 'update:checked'])
const tableKey = ref(0)
const showList = computed({
    get() {
        let list = props.list
        setChecked(list)
        return list
    },
    set(val) {
        emits('update:list', val)
    }
})
const setChecked = (list: any) => {
    let checkedList = props.checked ? props.checked : []
    let childCheckedCount = 0
    let childIndeterminateCount = 0
    list.forEach((item: any) => {
        if (checkedList.includes(item.id)) {
            if (item.childs && item.childs.length > 0) {
                let sum = setChecked(item.childs)
                if (sum[0] > 0 && sum[0] < item.childs.length || sum[1] > 0) {
                    item.indeterminate = true
                    childIndeterminateCount++
                } else if (sum[0] == item.childs.length) {
                    item.checked = true
                    childCheckedCount++
                }
            } else {
                item.checked = true
                childCheckedCount++
            }
        }
    })
    return [childCheckedCount, childIndeterminateCount]
}
const change = (item: any) => {
    item.checked = !item.checked
    item.indeterminate = false
    if (item.childs) {
        changeChilds(item)
    }
    if (item.pid) {
        changeFathers(item)
    }
    emits('update:list', showList.value)
    changeCheck()
    tableKey.value++
}
const changeChilds = (item: any) => {
    if (item.childs) {
        item.childs.forEach(child => {
            child.checked = item.checked
            child.indeterminate = false
            changeChilds(child)
        });
    }
}
const getFathers = (list: any[], pid: any) => {
    let father = null
    for (const item of list) {
        if (item.id == pid) {
            father = item
            break
        } else if (item.childs) {
            father = getFathers(item.childs, pid)
            if (father) {
                break
            }
        }
    }
    return father
}
const changeFathers = (item: any) => {
    let father = getFathers(showList.value, item.pid)
    if (!father) return;
    let checkedCount = father.childs.filter(child => child.checked).length
    let indeterminateCount = father.childs.filter(child => child.indeterminate).length
    father.indeterminate = (checkedCount > 0 && checkedCount < father.childs.length) || indeterminateCount > 0
    father.checked = checkedCount == father.childs.length
    if (father.pid != '') {
        changeFathers(father)
    }
}
const changeCheck = () => {
    emits('update:checked', getCheckedList(showList.value, []))
}
const getCheckedList = (list: any[], result: any[]) => {
    list.forEach(item => {
        if (item.checked || item.indeterminate) {
            result.push(item.id)
        }
        if (item.childs) {
            getCheckedList(item.childs, result)
        }
    });
    return result
}
</script>

<style lang="scss" scoped>
.MyHorizontalTreeList {
    width: 100%;

    .table {
        width: 100%;
    }



    :deep(.el-checkbox) {

        .el-checkbox__label {
            color: var(--el-checkbox-text-color);
            flex: 1;
            width: 0;
        }
    }
}

.row {
    display: flex;
    flex-direction: row;
    position: relative;

    .checked-box {
        margin: auto 10px;
    }
}

.paddings {
    padding: 10px;
}

.border-left {
    border-left: var(--el-table-border);
}

.border-top {
    border-top: var(--el-table-border);
}

.border-bottom {
    border-bottom: var(--el-table-border);
}

.border-right {
    border-right: var(--el-table-border);
}
</style>